<template>
  <div>
    <div class="top">
      <el-form ref="inForm" :inline="true" :model="paramForm" label-width="180px" class="demo-form-inline">
        <el-form-item label="订单编号:" prop="id">
          <el-input v-model="paramForm.id" type="text" placeholder="请输入订单编号" autocomplete="off" style="width: 200px;" />
        </el-form-item>
        <el-form-item label="订单状态:" prop="status">
          <el-select v-model="paramForm.status" placeholder="请选择" style="width: 200px;">
            <el-option label="待取件" value="23000" />
            <el-option label="已取件" value="23001" />
            <el-option label="网点自寄" value="23002" />
            <el-option label="网点入库" value="23003" />
            <el-option label="待装车" value="23004" />
            <el-option label="运输中" value="23005" />
            <el-option label="网点出库" value="23006" />
            <el-option label="待派送" value="23007" />
            <el-option label="派送中" value="23008" />
            <el-option label="已签收" value="23009" />
            <el-option label="拒收" value="23010" />
            <el-option label="已取消" value="23011" />
            <el-option label="全部" value="null" />

          </el-select>
        </el-form-item>
        <el-form-item label="付费状态:" prop="paymentStatus">
          <el-select v-model="paramForm.paymentStatus" placeholder="请选择" style="width: 200px;">
            <el-option label="未付" value="1" />
            <el-option label="已付" value="2" />
          </el-select>
        </el-form-item>
        <el-form-item label="发件人姓名:" prop="senderName">
          <el-input v-model="paramForm.senderName" type="text" placeholder="请输入发件人姓名" autocomplete="off" style="width: 200px;" />
        </el-form-item>
        <el-form-item label="发件人电话:" prop="senderPhone">
          <el-input v-model="paramForm.senderPhone" type="text" placeholder="请输入发件人电话" autocomplete="off" style="width: 200px;" />
        </el-form-item>
        <!-- 发地址 -->
        <el-form-item label="发件人地址：">
          <el-radio-group v-model="paramForm">
            <el-row :gutter="10">
              <el-col :span="8" prop="senderProvinceId">
                <el-select v-model="paramForm.senderProvinceId" placeholder="请选择省份" style="width: 60px;" @change="parentId">
                  <el-option
                    v-for="item in province"
                    :key="item.id"
                    :label="item.name"
                    :value="item.id"
                  />
                </el-select></el-col>
              <el-col :span="8" prop="senderCityId">
                <el-select v-model="paramForm.senderCityId" placeholder="请选择城市" style="width: 60px;" @change="pid">
                  <el-option
                    v-for="item in city"
                    :key="item.id"
                    :label="item.name"
                    :value="item.id"
                  />

                </el-select></el-col>
              <el-col :span="8" prop="senderCountyId">
                <el-select v-model="paramForm.senderCountyId" placeholder="请选择区域" style="width: 60px;">
                  <el-option
                    v-for="item in county"
                    :key="item.id"
                    :label="item.name"
                    :value="item.id"
                  />

                </el-select>
              </el-col>

            </el-row>

          </el-radio-group>
        </el-form-item>
        <el-form-item label="收件人姓名:" prop="receiverName">
          <el-input v-model="paramForm.receiverName" type="text" placeholder="请输入收件人姓名" autocomplete="off" style="width: 200px;" />
        </el-form-item>
        <el-form-item label="收件人电话:" prop="receiverPhone">
          <el-input v-model="paramForm.receiverPhone" type="text" placeholder="请输入收件人电话" autocomplete="off" style="width: 200px;" />
        </el-form-item>
        <!-- 收地址 -->
        <el-form-item label="收件人地址：">
          <el-radio-group v-model="paramForm">
            <el-row :gutter="10">
              <el-col :span="8" prop="receiverProvinceId">
                <el-select v-model="paramForm.receiverProvinceId" placeholder="请选择省份" style="width: 60px;" @change="parentId2">
                  <el-option
                    v-for="item in receiverprovince"
                    :key="item.id"
                    :label="item.name"
                    :value="item.id"
                  />
                </el-select></el-col>
              <el-col :span="8" prop="receiverCityId">
                <el-select v-model="paramForm.receiverCityId" placeholder="请选择城市" style="width: 60px;" @change="pid2">
                  <el-option
                    v-for="item in receivercity"
                    :key="item.id"
                    :label="item.name"
                    :value="item.id"
                  />

                </el-select></el-col>
              <el-col :span="8" prop="receiverCountyId">
                <el-select v-model="paramForm.receiverCountyId" placeholder="请选择区域" style="width: 60px;">
                  <el-option
                    v-for="item in receivercounty"
                    :key="item.id"
                    :label="item.name"
                    :value="item.id"
                  />

                </el-select>
              </el-col>

            </el-row>

          </el-radio-group>
        </el-form-item>
        <el-row :gutter="20">
          <el-col :span="24">
            <el-form-item style="margin-left: 100px;">
              <el-button type="primary" @click="search">搜索</el-button>
              <el-button @click="reset">重置</el-button>
            </el-form-item>

          </el-col>

        </el-row>

      </el-form>
    </div>
    <div class="table">
      <template>
        <el-table

          :data="tableData"
          stripe
          style="width: 100%"
          height="250"
        >
          <el-table-column
            :index="indexMethod"
            type="index"
            label="序号"
            width="50"
          />
          <el-table-column
            prop="id"
            label="订单编号"
            width="190"
          />

          <el-table-column
            prop="transportOrder.id"
            label="运单编号"
            width="190"
          />
          <el-table-column
            prop="createTime"
            label="下单时间"
            width="180"
          />
          <el-table-column
            prop="status"
            label="订单状态"
            width="120"
            :form-status="formStatus"
          >
            <template v-slot="{row}">
              <span>{{ formStatus(row) }}</span>
            </template>
          </el-table-column>
          <el-table-column
            prop="senderName"
            label="发件人姓名"
            width="120"
          />
          <el-table-column
            prop="senderPhone"
            label="发件人电话"
            width="120"
          />

          <el-table-column
            label="发件人地址"
            width="180"
          >
            <template slot-scope="scope">
              <span style="margin-left: 10px">{{ scope.row.senderProvince.name+scope.row.senderCity.name+ scope.row.senderCounty.name+scope.row.senderAddress }}</span>
            </template>
          </el-table-column>
          <el-table-column
            prop="receiverName"
            label="收件人姓名"
            width="120"
          />
          <el-table-column
            prop="receiverPhone"
            label="收件人电话"
            width="120"
          />
          <el-table-column
            label="收件人地址"
            width="180"
          >
            <template slot-scope="scope">
              <span style="margin-left: 10px">{{ scope.row.receiverProvince.name+scope.row.receiverCity.name+ scope.row.receiverCounty.name+scope.row.receiverAddress }}</span>
            </template>
          </el-table-column>
          <el-table-column
            prop="pickupType"
            label="取件类型"
            width="120"
          >
            <!-- 根据返回状态1.2判断类型 -->
            <template v-slot="{row}">
              <span>{{ row.status===1?'网点自寄':'上门取件' }}</span>
            </template>
          </el-table-column>
          <el-table-column
            prop="paymentMethod"
            label="付费类型"
            width="120"
          >
            <!-- 根据返回状态1.2判断类型 -->
            <template v-slot="{row}">
              <span>{{ row.status===1?'预结':'到付' }}</span>
            </template>
          </el-table-column>
          <el-table-column
            prop="paymentStatus"
            label="付费状态"
            width="120"
          >
            <!-- 根据返回状态1.2判断类型 -->
            <template v-slot="{row}">
              <span>{{ row.paymentStatus===1?'未付':'已付' }}</span>
            </template>
          </el-table-column>
          <el-table-column
            fixed="right"
            label="操作"
            width="120"
          >
            <template>
              <el-button type="text" size="small" @click="detailPage">查看详情</el-button>

            </template>
          </el-table-column>

        </el-table>
      </template>
    </div>
    <!-- 分页 -->
    <el-pagination
      class="pag"
      :current-page="paramForm.page"
      :page-sizes="[10, 20, 30, 50]"
      :page-size="paramForm.pageSize"
      layout="total, sizes, prev, pager, next, jumper"
      :total="+counts"
      @size-change="sizeChange"
      @current-change="currentChange"
    />
  </div>
</template>

<script>

import { getOrderList, provinceList } from './API/order-manage'
export default {
  name: 'OrderManage',
  data() {
    return {
      county: [],
      city: [],
      province: [],
      receivercounty: [],
      receivercity: [],
      receiverprovince: [],

      tableData: [], // 表格
      paramForm: { // 渲染请求数据/表单
        id: '',
        page: 1,
        pageSize: 10,
        paymentStatus: '',
        pickUpType: '',
        receiverCityId: '',
        receiverCountyId: '',
        receiverName: '',
        receiverPhone: '',
        receiverProvinceId: '',
        senderCityId: '',
        senderCountyId: '',
        senderPhone: '',
        senderProvinceId: '',
        status: ''

      },
      counts: '50'
    }
  },
  computed: {
    formStatus(row) {
      return (row) => {
        switch (row.status) {
          case 23000:
            return '待取件'
          case 23001:
            return '已取件'
          case 23002:
            return '网点自寄'
          case 23003:
            return '网点入库'
          case 23004:
            return '待装车'
          case 23005:
            return '运输中'
          case 23006:
            return '网点出库'
          case 23007:
            return '待派送'
          case 23008:
            return '派送中'
          case 23009:
            return '已签收'
          case 23010:
            return '拒收'
          default:
            return '已取消'
        }
      }
    }
  },

  async created() {
    const res = await provinceList()// 获取省份
    // console.log(res)
    this.province = res.data// 发件
    this.receiverprovince = res.data// 收件
    this.getOrderManageList()
  },
  methods: {
    async getOrderManageList() {
      const res = await getOrderList(this.paramForm)
      // console.log(res)
      this.tableData = res.data.items
      this.counts = res.data.counts
      // console.log(this.counts)
    },
    // 分页
    sizeChange(pageSize) {
      this.paramForm.pageSize = pageSize
      this.getOrderManageList()
    },
    currentChange(page) {
      this.paramForm.page = page
      this.getOrderManageList()
    },
    // 序号
    indexMethod(index) {
      return (this.paramForm.page - 1) * this.paramForm.pageSize + index + 1
    },
    // 获取发件城市
    async parentId(value) {
      // console.log(value)// 获取pid
      const res = await provinceList(value)// 获取城市
      // console.log(res)
      this.city = res.data
    },
    // 获取发件区域
    async pid(value) { // 组件上的value
      // console.log(value)// 获取pid
      const res = await provinceList(value)// 获取城市
      // console.log(res)
      this.county = res.data
    },
    // 获取收件城市
    async parentId2(value) {
      console.log(value)// 获取pid
      const res = await provinceList(value)// 获取城市
      // console.log(res)
      this.receivercity = res.data
    },
    // 获取收件区域
    async pid2(value) { // 组件上的value
      console.log(value)// 获取pid
      const res = await provinceList(value)// 获取城市
      // console.log(res)
      this.receivercounty = res.data
    },
    // 搜索
    search() {
      // console.log(this.paramForm)
      // console.log(Object.assign(this.paramForm, this.inputForm))// 合并对象
      // const res = await getOrderList({ ...this.paramForm, paymentStatus: Number(this.paramForm.paymentStatus) })
      // console.log(res)

      this.getOrderManageList()
    },
    // 重置
    reset() {
      this.$refs.inForm.resetFields()
      this.paramForm.receiverProvinceId = ''
      this.paramForm.receiverCityId = ''
      this.paramForm.receiverCountyId = ''
      this.paramForm.senderProvinceId = ''
      this.paramForm.senderCityId = ''
      this.paramForm.senderCountyId = ''
    },
    detailPage() {
      this.$router.push('/business/add-detailpage')// 跳转详情
    }

  }

}
</script>

<style>
.top{
    padding-top: 20px;
    margin: 20px;
    background-color: #fff;
}
.table{
  margin: 20px;
}
.pag{
  text-align: center;
}

</style>
